<template>
    <div>

      <navBar title="新闻列表"></navBar>

      <ul class="mui-table-view" v-for="(newItem, index) in news" :key="index">
        <li class="mui-table-view-cell mui-media">
          <a @click="toDetail(newItem.id)">
            <img class="mui-media-object mui-pull-left" :src="newItem.img">
            <div class="mui-media-body">
              {{ newItem.title }}
              <p class='mui-ellipsis'>
                {{ newItem.summary }}
              </p>
            </div>
          </a>
        </li>
      </ul>

    </div>
</template>

<script>
    export default {
        name: "index",
      data(){
          return {
            news:{}
          }
      },
      created(){
          this.$axios.get('news')
            .then(res => {
              this.news = res.data.news;
            })
            .catch(err => {
              console.log(err);
            })
      },
      methods:{
          toDetail(id){
            this.$router.push({
              name:"news.detail",
              params:{id:id}
            })
          }
      }
    }
</script>

<style scoped>
</style>
